/*** 案例 src\views\base\item\components\ItemEdit.vue file
v-if="form.uniqueCode" ref="editFile" :form-id="form.uniqueCode" */
<template>
  <div>
    <el-scrollbar
      class="vab-card"
      wrap-class="scrollbar-wrapper"
      wrap-style="overflow-y: auto;"
    >
      <div
        v-show="list.length > 0"
        class="file-div el-card is-hover-shadow vab-card"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="down-img"
          :class="item.isHover ? 'hover' : ''"
          @mouseleave="onLeave(item, index)"
          @mouseover="onHover(item, index)"
        >
          <img
            v-if="item.isImage"
            class="el-upload-list__item-thumbnail"
            :src="item.filePath"
          />
          <img
            v-else
            class="el-upload-list__item-thumbnail"
            :src="require('@/assets/fj.png')"
          />
          <div v-if="item.isHover" class="hover-icon">
            <span
              v-if="item.isImage"
              class="down-img-icon"
              @click="handlePictureCardPreview(item)"
            >
              <vab-icon
                icon="add-circle-line"
                style="font-size: 24px; color: #ffffff"
              />
            </span>
            <span class="down-img-icon" @click="handleDownload(item)">
              <vab-icon
                icon="arrow-down-circle-line"
                style="font-size: 24px; color: #ffffff"
              />
            </span>
            <span class="down-img-icon" @click="handleRemoveImg(item)">
              <vab-icon
                icon="delete-bin-line"
                style="font-size: 24px; color: #ffffff"
              />
            </span>
          </div>
          <div class="agreeTitle">{{ item.fileName }}</div>
        </div>
        <el-dialog v-model="dialogVisibleImg" width="800px">
          <el-scrollbar
            wrap-class="scrollbar-wrapper"
            wrap-style="overflow-y: auto;"
          >
            <div style="height: 800px">
              <el-image :src="dialogImageUrl" />
            </div>
          </el-scrollbar>
        </el-dialog>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
  import { getList, UploadFile, delDoc } from '@/api/file'
  import { useUserStore } from '@/store/modules/user'
  const { token } = useUserStore()
  export default defineComponent({
    name: 'File',
    props: {
      formId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        list: [],
        dialogVisibleImg: false,
      }
    },
    created() {
      console.log('xxx')
      this.WF_DocumentList(this.formId)
    },

    methods: {
      onHover(item, index) {
        this.list[index].isHover = true
      },
      onLeave(item, index) {
        this.list[index].isHover = false
      },
      downloadFn(row) {
        this.WF_DocumentList(row)
      },
      handlePictureCardPreview(row) {
        this.dialogVisibleImg = true
        this.dialogImageUrl = row.filePath
      },
      beforeUpload(file, fileList) {
        console.log(file, fileList)
      },
      handleDownload(row) {
        window.open(row.filePath)
      },
      handleRemoveImg(item) {
        this.WF_Documentdeldoc(item)
      },
      async WF_Documentdeldoc(item) {
        const params = {
          fileId: item.fileId,
        }
        const data = await delDoc(params)
        if (data.code == '200') {
          this.$message.success('删除成功')
          this.WF_DocumentList(item.formId)
        }
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisibleImg = true
      },
      uploadError() {
        this.$message.warning('上传失败')
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        )
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      handleSuccess(file, fileList) {
        console.log(file, fileList)
        this.$message.success('上传成功')
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      isAssetTypeAnImage(ext) {
        return (
          [
            '.png',
            '.jpg',
            '.jpeg',
            '.bmp',
            '.gif',
            '.webp',
            '.psd',
            '.svg',
            '.tiff',
          ].indexOf(ext.toLowerCase()) !== -1
        )
      },
      async WF_DocumentList(row) {
        const params = {
          formId: row,
        }
        const data = await getList(params)
        if (data.code == '200') {
          if (data.data.data && data.data.data.length > 0) {
            data.data.data.map((item) => {
              item.isImage = this.isAssetTypeAnImage(item.fileExtensions)
            })
          }
          this.list = data.data.data
          this.dialogVisibleDown = true
        }
      },
    },
  })
</script>
<style scoped lang="scss">
  .color_494949 {
    color: #494949;
  }
  .file-div {
    max-height: 300px;
  }
  ::v-deep .el-upload-dragger {
    height: 100%;
  }
  ::v-deep .ri-add-lin {
    font-size: 88px !important;
  }

  .down-img {
    position: relative;
    display: inline-block;
    width: 100px;
    padding: 0 10px;
    img {
      width: 100%;
      height: 100px;
    }
  }

  .hover {
    cursor: pointer;
  }
  .hover-icon {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: rgba(0, 0, 0, 0.5);

    .down-img-icon {
      display: inline-block;
      padding: 0 4px;
    }
  }
  .agreeTitle {
    display: -webkit-box;
    height: 35px;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
